<template>
  <ElConfigProvider :locale="zhCn">
    <ElForm class="dialog-form" ref="form" :model="data">
      <div class="dialog-form-body">
        <ElFormItem prop="customerInfo" label="客服信息" :rules="userRule">
          <ElInput v-model="data.customerInfo" />
        </ElFormItem>
        <ElFormItem v-if="result" label="检测结果">
          {{ result }}
        </ElFormItem>
      </div>
      

      <div class="dialog-form-footer">
        <ElButton type="primary" @click="save">查询</ElButton>
        <ElButton @click="cancel">取消</ElButton>
      </div>
    </ElForm>
    
  </ElConfigProvider>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElForm, ElFormItem, ElInput, ElConfigProvider, ElButton } from 'element-plus'
import { customerCheckDistributeRule } from '../api'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const userRule = { required: true, message: '记录人员是必须的', trigger: 'change' }

interface Props {
  ruleId: string | number
}
const props = defineProps<Props>()
interface Emits {
  resolve: [object],
  reject: []
}
const emit = defineEmits<Readonly<Emits>>()

const form = ref()
const data = reactive({
  customerInfo: ''
})
const result = ref('')

const save = async () => {
  await form.value.validate()
  result.value  = ''
  const res = await customerCheckDistributeRule({
    ruleId: props.ruleId,
    customerInfo: data.customerInfo
  })
  result.value = res || '查无此人'
}

const cancel = () => {
  emit('resolve', {})
}
</script>

<style scoped lang="scss">
.dialog-form {
  &-body {
    padding: 16px 16px 0;
  }
  &-footer {
    position: relative;
    height: 64px;
    background: #FFFFFF;
    box-shadow: 0 -5px 11px 0 #99999921;
    border-radius: 0 0 4px 4px;
    display: flex;
    align-items: center;
    padding: 0 34px;
  }
  :deep(.el-date-editor) {
    width: 100%;
  }
  :deep(.el-input-number) {
    width: 100%;
  }
  :deep(.el-input-number .el-input__inner) {
    text-align: left;
  }
}
</style>
